Sfrutta la portata globale con l'API JavaScript Intl. Scopri le best practice di internazionalizzazione per formattare date, numeri, valute e altro, garantendo un'esperienza utente perfetta in tutto il mondo.
API JavaScript Intl: Best Practice di Internazionalizzazione per un Pubblico Globale
Nel mondo interconnesso di oggi, creare applicazioni web che si rivolgono a un pubblico globale è fondamentale. L'API JavaScript Intl fornisce strumenti potenti per l'internazionalizzazione (i18n), consentendoti di formattare date, numeri, valute e altro in base alle convenzioni delle diverse impostazioni locali. Questo articolo esplora le best practice per sfruttare l'API Intl per creare applicazioni veramente globali.
Comprendere l'internazionalizzazione (i18n) e la localizzazione (l10n)
Prima di immergersi nelle specifiche dell'API Intl, è importante capire la distinzione tra internazionalizzazione (i18n) e localizzazione (l10n). I18n è il processo di progettazione e sviluppo di applicazioni in modo che possano essere facilmente adattate per diverse lingue e regioni senza richiedere modifiche ingegneristiche. L10n, d'altra parte, è il processo di adattamento di un'applicazione internazionalizzata per una specifica impostazione locale traducendo il testo e personalizzando altri elementi specifici dell'impostazione locale.
L'API Intl si concentra sull'aspetto i18n, fornendo i meccanismi per la gestione dei dati sensibili alle impostazioni locali, mentre la localizzazione in genere comporta la fornitura di traduzioni e configurazioni specifiche dell'impostazione locale.
Componenti chiave dell'API Intl
L'API Intl è composta da diversi oggetti chiave, ognuno responsabile della gestione di aspetti specifici dell'internazionalizzazione:
- Intl.Collator: Per confrontare stringhe in modo sensibile alle impostazioni locali.
- Intl.DateTimeFormat: Per formattare date e ore.
- Intl.NumberFormat: Per formattare numeri, incluse valute e percentuali.
- Intl.PluralRules: Per gestire le regole di pluralizzazione in diverse lingue.
- Intl.ListFormat: Per formattare elenchi in modo sensibile alle impostazioni locali.
- Intl.RelativeTimeFormat: Per formattare tempi relativi (ad es. "ieri", "tra 2 ore").
Best practice per l'utilizzo dell'API Intl
Per utilizzare efficacemente l'API Intl e garantire un'esperienza utente positiva per il tuo pubblico globale, considera le seguenti best practice:
1. Specifica l'impostazione locale corretta
Il fondamento dell'internazionalizzazione è specificare l'impostazione locale corretta. L'impostazione locale identifica la lingua, la regione e qualsiasi variante specifica da utilizzare per la formattazione. È possibile ottenere l'impostazione locale preferita dall'utente dalla proprietà navigator.language
o dall'intestazione HTTP Accept-Language
.
Quando si creano oggetti Intl, è possibile specificare l'impostazione locale come una stringa o un array di stringhe. Se fornisci un array, l'API tenterà di trovare l'impostazione locale più adatta tra le opzioni disponibili.
Esempio:
const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);
Se l'impostazione locale preferita dall'utente non è disponibile, è possibile fornire un'impostazione locale di fallback. Ad esempio, potresti utilizzare 'en-US' come predefinito se il browser dell'utente segnala un'impostazione locale non supportata.
2. Sfrutta Intl.DateTimeFormat per la formattazione di data e ora
Formattare correttamente date e ore è fondamentale per fornire un'esperienza localizzata. L'oggetto Intl.DateTimeFormat
ti consente di formattare date e ore in base alle convenzioni di una specifica impostazione locale.
È possibile personalizzare la formattazione specificando varie opzioni, come l'anno, il mese, il giorno, l'ora, i minuti e il formato dei secondi. È inoltre possibile specificare il fuso orario per garantire che date e ore vengano visualizzate correttamente per gli utenti in diverse parti del mondo.
Esempio:
const locale = 'de-DE'; // Tedesco (Germania)
const date = new Date();
const options = {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
timeZone: 'Europe/Berlin'
};
const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);
Questo esempio formatta la data e l'ora correnti in base alle impostazioni locali tedesche (Germania), inclusi l'anno, il mese, il giorno, l'ora e i minuti. Specifica anche il fuso orario 'Europe/Berlin'.
Ricorda di considerare i diversi formati di data e ora utilizzati in tutto il mondo. Ad esempio, gli Stati Uniti usano MM/GG/AAAA, mentre molti altri paesi usano GG/MM/AAAA.
3. Usa Intl.NumberFormat per la formattazione di numeri, valute e percentuali
L'oggetto Intl.NumberFormat
fornisce un modo flessibile per formattare numeri, valute e percentuali in base alle convenzioni specifiche dell'impostazione locale. È possibile personalizzare la formattazione specificando opzioni come valuta, stile (decimale, valuta o percentuale), cifre frazionarie minime e massime e altro ancora.
Esempio (Formattazione valuta):
const locale = 'ja-JP'; // Giapponese (Giappone)
const amount = 12345.67;
const options = {
style: 'currency',
currency: 'JPY'
};
const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "\u00A512,346"
console.log(formattedAmount);
Questo esempio formatta il numero 12345.67 come yen giapponesi (JPY). Si noti come il simbolo di valuta (¥) e il separatore di raggruppamento (,) vengono regolati automaticamente in base alle impostazioni locali giapponesi.
Esempio (Formattazione percentuale):
const locale = 'ar-EG'; // Arabo (Egitto)
const percentage = 0.75;
const options = {
style: 'percent',
minimumFractionDigits: 2
};
const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "\u066B\u0660\u0660\u066A"
console.log(formattedPercentage);
Questo esempio formatta il numero 0.75 come percentuale in arabo (Egitto). L'output include il segno di percentuale arabo (٪) e due posizioni decimali.
Considerazioni importanti per la formattazione della valuta:
- Codici valuta: utilizzare i codici valuta ISO 4217 corretti (ad es. USD, EUR, JPY).
- Posizionamento del simbolo: tenere presente che la posizione del simbolo di valuta varia a seconda delle impostazioni locali (ad es. prima o dopo l'importo).
- Separatori decimali e separatori di raggruppamento: comprendere le diverse convenzioni per i separatori decimali (ad es. punto o virgola) e i separatori di raggruppamento (ad es. virgola o punto).
4. Gestire correttamente la pluralizzazione con Intl.PluralRules
Le regole di pluralizzazione variano in modo significativo tra le lingue. Ad esempio, l'inglese ha regole semplici con forme singolari e plurali, mentre altre lingue hanno regole più complesse basate sul valore del numero. L'oggetto Intl.PluralRules
ti aiuta a determinare la forma plurale corretta per un dato numero e impostazione locale.
Esempio:
const locale = 'ru-RU'; // Russo (Russia)
const pluralRules = new Intl.PluralRules(locale);
function getPluralForm(count) {
const rule = pluralRules.select(count);
switch (rule) {
case 'one': return 'товар'; // tovar (singolare)
case 'few': return 'товара'; // tovara (pochi)
case 'many': return 'товаров'; // tovarov (molti)
default: return 'товаров'; // Predefinito a molti
}
}
const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"
Questo esempio dimostra come utilizzare Intl.PluralRules
per ottenere la forma plurale corretta per la parola "товар" (articolo) in russo. Il russo ha diverse forme plurali a seconda che il numero termini con 1, 2-4 o 5-9.
5. Formattare gli elenchi con Intl.ListFormat
Quando si presentano elenchi di elementi, la formattazione può variare a seconda delle impostazioni locali. L'oggetto Intl.ListFormat
ti consente di formattare gli elenchi in base alle convenzioni specifiche dell'impostazione locale, incluso l'uso di diverse congiunzioni (ad es. "e", "o") e separatori di elenchi (ad es. virgole, punti e virgola).
Esempio:
const locale = 'es-ES'; // Spagnolo (Spagna)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });
const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);
Questo esempio formatta un elenco di frutta in spagnolo (Spagna), usando la congiunzione "y" (e) per collegare gli ultimi due elementi.
6. Formattare i tempi relativi con Intl.RelativeTimeFormat
Visualizzare i tempi relativi (ad es. "ieri", "tra 2 ore") fornisce un modo intuitivo per presentare le informazioni sull'ora. L'oggetto Intl.RelativeTimeFormat
ti consente di formattare i tempi relativi in base alle convenzioni specifiche dell'impostazione locale.
Esempio:
const locale = 'fr-CA'; // Francese (Canada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"
Questo esempio formatta i tempi relativi in francese (Canada). L'output mostra "hier" (ieri) e "dans 2 jours" (tra 2 giorni).
L'opzione `numeric` controlla come vengono visualizzati i numeri. `'auto'` visualizza le parole relative quando sono disponibili (come "ieri") e i numeri altrimenti. `'always'` visualizza sempre i numeri.
7. Ordinare le stringhe con Intl.Collator
Il confronto tra stringhe è sensibile alle impostazioni locali. Il modo in cui le stringhe vengono ordinate varia a seconda della lingua. Ad esempio, in tedesco, il carattere "ä" viene in genere ordinato come "a", mentre in svedese viene ordinato dopo "z". L'oggetto Intl.Collator
ti consente di confrontare le stringhe in base alle regole di una specifica impostazione locale.
Esempio:
const locale = 'de-DE';
const collator = new Intl.Collator(locale);
const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);
console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]
Questo esempio ordina un array di parole tedesche usando Intl.Collator
. Si noti che "äpfel" viene ordinato prima di "aprikosen", anche se "ä" viene dopo nell'alfabeto.
8. Gestire i casi limite e i dati mancanti
Non tutte le impostazioni locali sono supportate da ogni browser o ambiente. È essenziale gestire i casi limite in cui un'impostazione locale non è disponibile o quando mancano dati. Considera le seguenti strategie:
- Fornire impostazioni locali di fallback: specificare un'impostazione locale predefinita da utilizzare quando l'impostazione locale preferita dall'utente non è supportata.
- Degradazione graduale: se specifiche opzioni di formattazione non sono supportate per un'impostazione locale, fornire un fallback ragionevole. Ad esempio, potresti visualizzare una data in un formato meno dettagliato.
- Utilizzare blocchi Try-Catch: racchiudere le chiamate API Intl in blocchi try-catch per gestire gli errori potenziali in modo corretto.
9. Testare a fondo con diverse impostazioni locali
Testare a fondo è fondamentale per garantire che l'applicazione internazionalizzata funzioni correttamente per tutte le impostazioni locali supportate. Testa la tua applicazione con una varietà di impostazioni locali, incluse le lingue che utilizzano diversi set di caratteri, formati di data e ora, formati numerici e regole di pluralizzazione.
Prendi in considerazione l'utilizzo di strumenti di test automatizzati per verificare che la tua applicazione si comporti come previsto in diverse impostazioni locali.
10. Considerare le implicazioni sulle prestazioni
Sebbene l'API Intl sia generalmente efficiente, la creazione di oggetti Intl può essere relativamente costosa. Per ottimizzare le prestazioni, considera quanto segue:
- Memorizza nella cache gli oggetti Intl: crea gli oggetti Intl una sola volta e riutilizzali quando possibile, invece di creare nuovi oggetti per ogni operazione di formattazione.
- Carica pigramente i dati delle impostazioni locali: carica i dati delle impostazioni locali solo quando sono necessari, invece di caricare tutti i dati delle impostazioni locali in anticipo.
Oltre l'API Intl: ulteriori considerazioni per l'internazionalizzazione
Sebbene l'API Intl fornisca strumenti potenti per la formattazione dei dati, l'internazionalizzazione implica più della semplice formattazione. Considera i seguenti aspetti aggiuntivi:
- Direzione del testo (RTL/LTR): supporta le lingue da destra a sinistra (RTL) come arabo ed ebraico utilizzando CSS per regolare il layout della tua applicazione.
- Codifica dei caratteri: utilizza la codifica UTF-8 per garantire che la tua applicazione possa gestire un'ampia gamma di caratteri.
- Gestione delle traduzioni: utilizza un sistema di gestione delle traduzioni per semplificare il processo di traduzione del testo della tua applicazione.
- Design culturalmente sensibile: sii consapevole delle differenze culturali quando progetti la tua applicazione. Ad esempio, il simbolismo del colore può variare tra le culture.
Conclusione
L'API JavaScript Intl è uno strumento prezioso per la creazione di applicazioni web che si rivolgono a un pubblico globale. Seguendo le best practice delineate in questo articolo, puoi creare applicazioni che non sono solo funzionali, ma anche culturalmente sensibili e facili da usare per gli utenti di tutto il mondo. Abbraccia la potenza dell'API Intl e sblocca il potenziale della tua applicazione sulla scena globale. Padroneggiare l'API Intl si tradurrà in un'esperienza più inclusiva e accessibile per tutti i tuoi utenti, indipendentemente dalla loro posizione o lingua.